<template>
    <div id="shop_nav_bar">
        <nav-bar class="top_bar">
            <div slot="center">购物车({{count}})</div>
            <div slot="right" @click="showTab">管理</div>
        </nav-bar>
        <div class="delete-shop" v-show="isShow">
            <div class="quit" @click="showTab">取消</div>
            <div class="delete" @click="deleteShop">删除</div>
        </div>
    </div>
</template>

<script>
    import NavBar from "../../../components/common/navbar/NavBar";
    export default {
        name: "ShopNavBar",
        components:{
            NavBar
        },
        data(){
            return{
                count:0,
                isShow:false
            }
        },
        methods:{
            //删除商品按钮的显示
            showTab(){
                this.isShow = !this.isShow;
            },
            deleteShop(){
               for (let item of this.$store.state.shopInfo){
                   if (item.checked){
                      this.$store.state.shopInfo.delete(item)
                   }
               }
            }
        },
        created() {
          this.count = this.$store.state.shopInfo.length
        }
    }
</script>
<style scoped>
    .top_bar{
        background-color: hotpink;
        color: white;
    }
    .delete-shop{
        position: fixed;
        width: 200px;
        height: 40px;
        line-height: 40px;
        right: 0;
        bottom: 54px;
        background-color: palevioletred;
        z-index: 999;
        display: flex;
        color: white;
    }
    .delete{
        flex: 1;
        text-align: center;
    }
    .quit{
        flex: 1;
        text-align: center;
        border-right:1px black solid;
    }
</style>